<!-- 技师详情 -->
<template>
	<view class="technician-detail-page">
		<view class="relative">
			<!-- 轮播图 -->
			<swiper
				class="cover-img"
				indicator-color="#E7E7E7"
				indicator-active-color="#fff"
				:indicator-dots="indicatorDots"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration"
				:circular="circular"
			>
				<swiper-item v-for="(item, index) in lifeList" :key="index"><image class="cover-img" mode="aspectFill" :src="item"></image></swiper-item>
			</swiper>

			<view class="absolute">
				<view class="cover-title">{{ detailInfo.technicianName }}</view>
				<view class="flex-between">
					<view class="flex-columns">
						<view class="flex-align-center">
							<view class="font24">
								<text class="iconfont icon-dingweiweizhi address-icon"></text>
								<!-- this.$sun.getDistances(第一点的纬度, 第一点的经度, 第二点的纬度, 第二点的经度) -->
								{{ this.$sun.getDistances(lat, lng, detailInfo.latitude, detailInfo.accuracy).km }}km
							</view>
							<view class="sex-class flex-align-center">
								<image src="/static/sex1.png"></image>
								{{ detailInfo.age }}
							</view>
							<view class="online flex-align-center" v-if="detailInfo.status">
								<text
									:class="detailInfo.status == 1 ? 'color666' : detailInfo.status == 3 ? 'red' : detailInfo.status == 4 ? 'golden' : 'green'"
									class="iconfont icon-xuanzhong"
								></text>
								<!-- 1.离线 2.在线 3.冻结 4.服务中 -->
								{{ orderStatus(detailInfo.status) }}
							</view>
						</view>
						<view class="flex-align-center service-num"><view>服务：110单</view></view>
					</view>
					<view class="flex-column">
						<!-- icon-shoucang_shoucang -->
						<text class="iconfont icon-shoucang font40"></text>
						<view>收藏</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding20">
			<!-- 基本资料 -->
			<view class="flex-align-center">
				<view class="left-rectangle"></view>
				<view class="font32 m-left10">基本资料</view>
			</view>
			<view class="type-padding flex-wrap">
				<!-- detailInfo.label，需要自定义颜色 -->
				<!-- <view :style="{ color: i.color, background: i.back }" v-for="(i, j) in typeList" :key="j">{{ i.text }}</view> -->
				<view style="color: #19C866;background-color: #DEFFD9;" v-for="(i, j) in typeList" :key="j">{{ i }}</view>
			</view>
			<view class="rich-text flex-columns" v-if="detailInfo.personalLntroduction">
				<view class="personal-profile flex">
					<image src="/static/person.png"></image>
					员工简介
				</view>
				{{ detailInfo.personalLntroduction }}
			</view>

			<!-- 生活照start -->
			<block v-if="lifeList.length > 0">
				<scroll-view scroll-x="true" class="p-bottom20">
					<view class="flex-align-center certificate">
						<view v-for="(i, j) in lifeList" :key="j" @click="showBigImg(i, lifeList)"><image :src="i"></image></view>
					</view>
				</scroll-view>
			</block>
			<!-- 生活照end -->

			<!-- 资质证书 -->
			<block v-if="qualificationList.length > 0">
				<view class="flex-align-center p-align-top20">
					<view class="left-rectangle"></view>
					<view class="font32 m-left10">资质证书</view>
				</view>
				<scroll-view scroll-x="true">
					<view class="flex-align-center certificate">
						<view v-for="(i, j) in qualificationList" :key="j" @click="showBigImg(i, qualificationList)"><image :src="i"></image></view>
					</view>
				</scroll-view>
			</block>
			<!-- 评价列表  v-if="list.length > 0"-->
			<view class="anchor">
				<view class="flex-align-center p-align-top20">
					<view class="left-rectangle"></view>
					<view class="font32 m-left10">评价列表（{{ listCount || 0 }}）</view>
				</view>
				<mescroll-body ref="mescrollRef" @up="upCallback">
					<view class="evaluation-list display" v-for="(i, j) in list" :key="j">
						<!-- anonymousNot ：是否匿名 1.是(使用匿名头像) 2否 -->
						<!-- _nont：是否显示 1.是 2否 -->
						<!-- evaluationKeywords ：评论关键词 -->
						<image src="/static/annoymous.png"></image>
						<view class="flex-columns flex1">
							<view class="flex-align-center m-bottom6">
								月亮姐姐
								<view class="sex-class flex-align-center">
									<image src="/static/sex1.png"></image>
									22
								</view>
							</view>
							<view class="flex-between">
								<text class="color999 font24">{{ i.createdAt }}</text>
								<!-- i.score——技师评分 -->
								<view style="width: 260rpx;"><sunui-star :defaultStar="defaultStar" :maxStar="5" :starSize="'1.1em'" :isScore="1" @changeStar="changeStar" /></view>
							</view>
							<!-- 技师评价——需加展开按钮 -->
							<view class="p-align-top20">{{ i.technicianEvaluation }}</view>
							<view class="flex-wrap">
								<block v-for="(i, j) in i.evaluationKeywords" :key="j">
									<view class="like-types flex-align-center">
										<image src="/static/like.png"></image>
										{{ i }}
									</view>
								</block>
							</view>
						</view>
					</view>
				</mescroll-body>
			</view>
		</view>
		<!-- 去预约，按钮 -->
		<view class="reservation-btn" @click="reservationClick"><button>返回上页</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			lat: uni.getStorageSync('lat'),
			lng: uni.getStorageSync('lng'),
			/* 轮播图start */
			indicatorDots: true, //显示图片点数
			autoplay: true,
			interval: 2000,
			duration: 1000,
			circular: true,
			lifeList: [], // 生活照list
			/* 轮播图end */

			qualificationList: [], // 资质证书list

			technicianId: '', //技师id
			detailInfo: {}, //技师详情
			list: [], //评价列表
			listCount: '',
			projectInfo: {}, //选中的项目对象
			imgList: ['https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1691134515391.png'],
			defaultStar: 0,
			typeList: [
				/* {
					color: '#4B69FF',
					back: '#DCE2FF',
					text: '广州市'
				},
				{
					color: '#FF0384',
					back: '#FFDAED ',
					text: '从业3年'
				},
				{
					color: '#19C866',
					back: '#DEFFD9',
					text: '手法一流'
				} */
			],
			plList: [
				{
					text: '人美心善'
				},
				{
					text: '服务超好'
				}
			],
			isSpeak:''
		};
	},
	onLoad(options) {
		this.technicianId = options.id; //技师id
		console.log('options', options);
		this.isSpeak=options.isSpeak
	},
	onShow() {
		if (this.isSpeak == 1) {
			uni.createSelectorQuery()
				.select('.anchor')
				.boundingClientRect(res => {
					//最外层盒子节点
					console.log('res=======', res);
					this.$nextTick(()=>{
						uni.pageScrollTo({
							duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
							scrollTop: res.top //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
						});
					})
				})
				.exec();
		}
		this.getTechnicianDetails(); // 查询技师详情
	},
	computed: {
		// 为空未判断
		orderStatus: function() {
			return function(status) {
				// <!-- 1.离线 2.在线 3.冻结 4.服务中 -->
				let orderStatus = '';
				if (status == 1) {
					orderStatus = '离线';
				}
				if (status == 2) {
					orderStatus = '在线';
				}
				if (status == 3) {
					orderStatus = '冻结';
				}
				if (status == 4) {
					orderStatus = '服务中';
				}
				return orderStatus;
			};
		}
	},
	methods: {
		// 点击 “图片预览” 方法
		showBigImg(src, srclist) {
			uni.previewImage({
				current: src,
				urls: srclist
			});
			console.log('current', current, 'urls', urls);
		},

		// “查看更多”项目
		moreLook() {
			this.$sun.navGo('/pages/user/more-project/more-project', {
				// this.$sun.param() :将对象解析成url字符串
				technicianInfo: this.$sun.param(this.detailInfo), //技师对象
				type: 2
			});
		},

		// “预约技师” 弹框展示
		reservationClick() {
			this.$sun.navBack(); 
		},
		// 查询技师评论根据技师id查询
		async upCallback(scroll) {
			const result = await this.$http.get({
				url: this.$api.getByTechnicianComments,
				data: {
					page: scroll.num,
					limit: 10,
					technicianId: this.technicianId //技师id
				}
			});
			if (result.code == 200) {
				console.log('查询技师评论根据技师', result);
				this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
				if (scroll.num == 1) this.list = [];
				this.list = this.list.concat(result.data.list);
				this.list = this.list.map(t => {
					t.evaluationKeywords = t.evaluationKeywords.split(',')
					return (t);
				});
				this.listCount = result.data.count;
				console.log('this.list', this.list, this.list.length);
			}
		},

		// 查询技师详情
		async getTechnicianDetails() {
			const result = await this.$http.get({
				url: this.$api.getByTechnicianDetails + this.technicianId //技师id
			});
			if (result.code == 200) {
				console.log('查询技师详情result.', result);
				this.detailInfo = result.data;
				this.typeList = this.detailInfo.label.split(','); // 技师标签
				this.lifeList = this.detailInfo.lifePhotos.split(','); // 生活照list
				this.qualificationList = this.detailInfo.qualificationCertificate.split(','); // 资质证书list
				console.log('查询技师详情csList=====', this.lifeList, 'this.qualificationList', this.qualificationList);
			} else {
				this.$sun.toast(result.message);
			}
		},

		//预览轮播图
		previewImage: function(index) {
			var i = this.roomInfo.carousel; //获取当前页面的轮播图数据
			//uniapp预览轮播图
			uni.previewImage({
				current: index, //预览图片的下标
				urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			});
		},
		// 评分
		changeStar(e) {
			let status = e.curStar;
			this.currentStar = status;
			status == 1
				? (this.commentStr = '非常差')
				: status == 2
				? (this.commentStr = '很差')
				: status == 3
				? (this.commentStr = '一般')
				: status == 4
				? (this.commentStr = '好')
				: status == 5
				? (this.commentStr = '非常好')
				: '';
		}
	}
};
</script>

<style lang="less">
.technician-detail-page {
	padding-bottom: 134rpx; // 底部按钮 fixed ，高度留空
	// 封面图
	.cover-img {
		width: 100%;
		height: 686rpx;
	}
	// 封面图信息绝对定位
	.absolute {
		color: #fff;
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		position: absolute;
		bottom: 60rpx;
		.cover-title {
			margin-bottom: 16rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #fff;
		}
		.address-icon {
			font-size: 24rpx;
			margin-right: 6rpx;
		}
		.online {
			margin-left: 10rpx;
			padding: 4rpx 10rpx;
			font-size: 24rpx;
			border: 2rpx solid #fff;
			border-radius: 70rpx;
			text {
				font-size: 12rpx;
				margin-right: 4rpx;
			}
		}
		.service-num {
			margin-top: 10rpx;
		}
	}
	// 分类
	.type-padding {
		padding: 20rpx;
		view {
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
	}
	// 详情富文本
	.rich-text {
		background-color: #f6f6f6;
		padding: 0 20rpx 20rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		color: #333;
		.personal-profile {
			color: #fff;
			width: 150rpx;
			font-size: 24rpx;
			background-color: #14df79;
			border-radius: 12rpx;
			padding: 6rpx 10rpx;
			margin: 20rpx 0rpx;
			image {
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
	// 资质证书
	.certificate {
		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			margin: 18rpx;
		}
	}
	
	// 评价列表
	.evaluation-list {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #efefef;
		image {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.like-types {
			color: #44e52c;
			font-size: 24rpx;
			background-color: #eaffe7;
			border-radius: 8rpx;
			padding: 6rpx 14rpx;
			margin: 0 16rpx 16rpx 0;
			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
		}
	}
	// 去预约 按钮
	.reservation-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 40rpx;
		button {
			border: none;
			width: calc(100% - 80rpx);
			height: 100rpx;
			font-size: 36rpx;
			margin: 0;
			color: #fff;
			border-radius: 80rpx;
			background-image: linear-gradient(to right, #0ac364, #14df79);
		}
	}
}
</style>
